<template>
  <div class="sharesearch">
    <van-nav-bar title="面经搜索" class="navtitle">
      <template #left>
        <i @click="goBack" class="icon iconfont iconbtn_nav_back leftArro"></i>
      </template>
    </van-nav-bar>
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="getSearch"
      @cancel="onCancel"
      shape="round"
    />
    <div v-if="isshow" class="main">
      <div class="title">
        <span>大家都在搜索</span>
      </div>
      <div class="tabs">
        <span
          v-for="(item, index) in searchList"
          :key="index"
          @click="getSearch(item)"
          >{{ item }}</span
        >
      </div>
      <div>
        <div class="history">
          <span class="one">历史记录</span> <span @click="clearAll">清空</span>
          <div class="bottom">
            <span
              class="hisitem"
              v-for="(item, index) in historyList"
              :key="index"
              @click="getSearch(item)"
              >{{ item }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div v-else class="searchShow">
      <faceshare
        :item="item"
        v-for="(item, index) in showList"
        :key="index"
      ></faceshare>
    </div>
  </div>
</template>
<script>
import { apiGetSearchHots, apiGetShareData } from '@/api/find'
import faceshare from '@/views/home/find/faceshare'
import { setLocal, getLocal, removeLocal } from '@/utils/local'
export default {
  components: {
    faceshare
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    onSearch () {
      console.log('onSearch')
    },
    onCancel () {
      this.isshow = true
    },
    // 获取搜索热词
    async getHots () {
      const res = await apiGetSearchHots()
      console.log(res)
      this.searchList = res.data
    },
    // 点击热词获取面经
    async getSearch (key) {
      this.historyList.unshift(key)
      //   去除重复项
      this.historyList = [...new Set(this.historyList)]
      if (this.historyList.length > 5) {
        this.historyList = this.historyList.splice(0, 5)
      }
      //   将热词保存到浏览器本地
      setLocal('history', JSON.stringify(this.historyList))
      this.value = key
      this.isshow = false
      const res = await apiGetShareData({ q: key })
      console.log('标题', res)

      res.data.list.forEach(item => {
        item.title = item.title.replace(
          key,
          `<span style="color:red">${key}</span>`
        )
      })
      this.showList = res.data.list
    },
    // 清除历史数据
    clearAll () {
      this.$dialog
        .confirm({
          title: '警告',
          message: '确定要删除历史数据吗'
        })
        .then(() => {
          // on confirm
          this.historyList = []
          removeLocal('history')
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  data () {
    return {
      value: '',
      searchList: [],
      showList: [],
      isshow: true,
      historyList: JSON.parse(getLocal('history')) || []
    }
  },
  created () {
    this.getHots()
    console.log('历史', this.historyList)
  }
}
</script>
<style lang="less" scoped>
.sharesearch {
  font-size: 12px;
  /deep/.van-nav-bar__title {
    font-size: 18px;
  }
  /deep/ .van-nav-bar__left {
    padding: 0;
  }
  .leftArro {
    font-size: 44px;
  }
  .main {
    margin: 0 15px;
  }
  .title {
    font-size: 18px;
    margin: 20px 0 10px 0;
  }
  .tabs {
    display: flex;
    span {
      padding: 5px;
      margin-right: 10px;
      background-color: #eceaea;
    }
  }
  .history {
    .hisitem {
      padding: 5px;
      margin-right: 10px;
      background-color: #eceaea;
      display: flex;
    }
    margin-top: 25px;

    .one {
      flex: 1;
      font-size: 18px;
      margin-right: 210px;
    }
  }
  .bottom {
    display: flex;
    margin-top: 15px;
  }
}
</style>
